<!--  -->
<template>
  <div class="m-city-category">
    <dl class='m-dl'>
      <dt>按拼音首字母选择:</dt>
      <dd
        v-for="(item,index) of code"
        :key='index'
      >
        <!-- <span></span> -->
        <a :href="'#city'+item">{{item}}</a>
      </dd>

    </dl>
    <dl
      class="city-code clearfix"
      v-for="item of codeContent"
      :key='item.pinyin'
    >
      <dt :id="'city'+item.pinyin"><span>{{item.pinyin}}</span></dt>
      <dd
        v-for="c of item.data"
        :key='c.id'
      >{{c.name}}</dd>
    </dl>
  </div>
</template>

<script>
import jspinyin from "js-pinyin";
export default {
  data() {
    return {
      code: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z"
      ],
      codeContent: []
    };
  },

  components: {},

  computed: {},
  async mounted() {
    let self = this;
    let {
      status,
      data: { city }
    } = await self.$axios.get(
      `http://cp-tools.cn/geo/city?sign=2887e552643c295f7301096e12134e8d`
    );

    if (status === 200) {
      // self.codeContent = city;

      let temp = city.map(i => {
        return {
          province: i.province,
          id: i.id,
          name: i.name,
          pinyin: jspinyin
            .getFullChars(i.name)
            .toLocaleUpperCase()
            .slice(0, 1)
        };
      });
      console.log(temp);
      var map = {},
        dest = [];
      for (var i = 0; i < temp.length; i++) {
        var ai = temp[i];
        if (!map[ai.pinyin]) {
          dest.push({
            pinyin: ai.pinyin,
            data: [ai]
          });
          map[ai.pinyin] = ai;
        } else {
          for (var j = 0; j < dest.length; j++) {
            var dj = dest[j];
            if (dj.pinyin == ai.pinyin) {
              dj.data.push(ai);
              break;
            }
          }
        }
      }
      this.codeContent = dest.sort((a,b) =>a.pinyin.charCodeAt(0)-b.pinyin.charCodeAt(0));
    } else {
      self.codeContent = [];
    }
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
.m-dl {
  line-height: 80px;
  height: 80px;
  dd {
    // display: inline-block;
    margin: 0 10px;

    a {
      color: #666;
      display: inline-block;
      font-size: 15px;
      cursor: pointer;
      width: 25px;
      height: 25px;
      box-sizing: border-box;
      border-radius: 50%;
      text-align: center;
      line-height: 25px;
      padding-top: 2px;

      &:hover {
        background: #f8f8f8;
      }
    }
  }

  // border-bottom: 1px solid #e5e5e5;
  & > * {
    float: left;
  }
}
.city-code {
  padding: 13px 30px 13px 10px;
  border-radius: 10px;
  -webkit-transition: background-color 0.5s;
  -ms-transition: background-color 0.5s;
  transition: background-color 0.5s;
  &:hover {
    background: #f8f8f8;
  }
  dt {
    display: block;
    // background-color: pink;

    span {
      width: 40px;
      height: 100%;
      box-sizing: border-box;
      vertical-align: top;
      padding-top: 10px;
      display: inline-block;
      text-align: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      color: #fff;
      background: #13d1be;
      box-shadow: 0 4px 5px 0 rgba(39, 178, 164, 0.22);
    }
  }
  dd {
    margin: 10px 20px;
    color: #666;
    display: inline-block;
    font-size: 14px;
  }
  & > * {
    float: left;
  }
}
.clearfix {
  overflow: auto;
  _height: 1%;
}
</style>
